<!--
 * @页面名称:右侧列表
 * @描述: 
 * @作者: 
 * @Date:
-->
<template>
  <div class="right_list">
    <a-list item-layout="horizontal" :data-source="data">
      <template #renderItem="{ item, index }">
        <a-collapse v-model:activeKey="activeKey" accordion ghost>
          <a-collapse-panel :key="index" :show-arrow="false">
            <template #header>
              <a-list-item>
                <a-list-item-meta>
                  <template #title>
                    <span style="width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
                      {{ item.title }}
                    </span>
                    <component :is="iconType" @click="changeIcon" />
                  </template>
                  <template #avatar>
                    <a-avatar src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png" />
                  </template>
                  <template #description>
                    <div style="display: flex; justify-content: space-between">
                      <span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
                        Ant Design, a design language for background applications, is refined by Ant UED Team.
                      </span>
                      <span style="color: #afa2a2; margin-left: 10px">2024/03/12</span>
                    </div>
                  </template>
                </a-list-item-meta>
              </a-list-item>
            </template>
            <!-- 全文预览 -->
            <preview
              v-if="fulltextConfig.visible"
              :visible="fulltextConfig.visible"
              :type="fulltextConfig.type"
              :fileList="fulltextConfig.fileList"
              :download="fulltextConfig.download"
              :print="fulltextConfig.print"
            ></preview>
          </a-collapse-panel>
        </a-collapse>
      </template>
    </a-list>
  </div>
</template>

<script setup lang="ts">
import { reactive, onMounted, ref } from "vue";
import Preview from "./preview/Preview.vue";
import { StarOutlined, StarFilled } from "@ant-design/icons-vue";
import useCurrentInstance from "@/utils/useCurrentInstance";

const { proxy } = useCurrentInstance();

const props = defineProps({
  itemData: {
    type: Object,
    default: () => {}
  }
});
interface DataItem {
  title: string;
}
// 数据集合
const data: DataItem[] = [
  {
    title: "Ant Design Title 1"
  },
  {
    title: "Ant Design Title 2"
  },
  {
    title: "Ant Design Title 3"
  },
  {
    title: "Ant Design Title 4"
  }
];
// 折叠面板绑定key
const activeKey = ref([]);
// 图标类型
const iconType = ref(StarOutlined);
// 图标切换标识
const iconFlag = ref(true);
// 全文预览配置参数
const fulltextConfig = reactive({
  // 预览全文配置参数
  visible: false,
  fileList: [] as any[],
  type: "",
  download: false,
  print: false
});
// 点击图标改变事件
const changeIcon = (e: any) => {
  // 阻止父级点击事件
  e.stopPropagation();
  if (iconFlag.value) {
    iconType.value = StarFilled;
  } else {
    iconType.value = StarOutlined;
  }
  iconFlag.value = !iconFlag.value;
};
</script>

<style scoped lang="scss">
.right_list {
  .ant-list-item-meta {
    align-items: center;
    :deep(.ant-list-item-meta-title) {
      display: flex;
      justify-content: space-between;
      align-items: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      a {
        &:hover {
          color: var(--el-color-primary);
        }
      }
    }
  }
  :deep(.ant-collapse-header) {
    padding: 0;
  }
}
</style>
